/**
 * 折线图、柱状图、面积图、点状图
 * LineChartsC (reactCharts)
 * @author zhy
 * @date  2020-04-28
 */
import React from 'react';
import { XYAxisChartsC, FirstHeaderC, SecondHeaderC } from '../../components';
import { Row, Col } from 'antd';
import Color from '../../css/colors';

class XYAxisChartsCDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      xAxis1: null,
      series1: null,
      xAxis2: null,
      series2: null,
      // xAxis3: [],
      // series3: [],
      xAxis3: ['项1', '项2', '项3', '项4'],
      series3: [
        {
          data: [1, 2, 3, 4],
          name: '手动阀手动阀地方',
        },
        {
          data: [1, 2, 3, 4],
          name: '大大的风',
        },
        {
          data: [4, 3, 2, 1],
          name: '阿道夫',
        },
        {
          data: [1, 2, 3, 4],
          name: '阿斯顿发的发生',
        },
        {
          data: [4, 3, 2, 1],
          name: '沃尔沃二无',
        },
        {
          data: [1, 2, 3, 4],
          name: '佛燃股份的四个',
        },
        {
          data: [4, 3, 2, 1],
          name: '阿斯顿发我',
        },
        {
          data: [1, 2, 3, 4],
          name: 'treat',
        },
        {
          data: [4, 3, 2, 1],
          name: '阿萨德飞儿',
        },
        {
          data: [1, 2, 3, 4],
          name: '人太多发的发',
        },
        {
          data: [4, 3, 2, 1],
          name: '让他玩热帖外人田',
        },
        {
          data: [1, 2, 3, 4],
          name: '人太多执行查询正常展示发的发',
        },
        {
          data: [4, 3, 2, 1],
          name: 'gsfdg',
        },
        {
          data: [1, 2, 3, 4],
          name: '规范',
        },
        {
          data: [1, 2, 3, 4],
          name: 'tryrrtsgret',
        },
        {
          data: [4, 3, 2, 1],
          name: '染色体施工方低功耗',
        },
        {
          data: [1, 2, 3, 4],
          name: '泼尼',
        },
        {
          data: [1, 2, 3, 4],
          name: 'iuiyuiyr',
        },
        {
          data: [4, 3, 2, 1],
          name: '考虑跟接口根据',
        },
        {
          data: [1, 2, 3, 4],
          name: '同一套',
        },
      ],
      // xAxis7: [
      //   '产品1','产品2','产品3','产品4','产品5','产品6','产品7','产品8','产品9','产品10',
      //   '产品11','产品12',
      //   '产品13',
      //   // '产品14','产品15','产品16','产品17','产品18','产品19','产品20',
      //   // '产品产品产品21'
      // ],
      // series7: [
      //   {
      //       name:'资产1',
      //       data:[{
      //         value:0.34,
      //         itemStyle:{
      //           opacity:0.5
      //         }
      //       },
      //       0.32,0.71,1.51,3.12,4.51,0.13,0.27,1.25,3.22,
      //       4.25,0.23,
      //       0.27,
      //       // 1.25,3.22,4.25,0.23,0.27,1.25,3.22,
      //       // 5.12
      //     ],
      //   },
      // ],
      xAxis7: null,
      series7: null,
    };

    setTimeout(() => {
      this.setState({
        xAxis1: [
          '2020-05-06',
          '2020-05-07',
          '2020-05-08',
          '2020-05-11',
          '2020-05-12',
          '2020-05-13',
          '2020-05-14',
          '2020-05-15',
          '2020-05-18',
          '2020-05-19',
          '2020-05-20',
          '2020-05-21',
          '2020-05-22',
          '2020-05-25',
          '2020-05-26',
          '2020-05-27',
          '2020-05-28',
          '2020-05-29',
          '2020-06-01',
          '2020-06-02',
          '2020-06-03',
        ],
        series1: [
          // {
          //     name:'资产',
          //     // data:[-0.14,0.3,0.7,1.5,3.2,4.5],
          //     // data:[0.001, 0.003, 0.002, 0.004, 0.005,0.006]
          //     // data:[0.001, 0.003, 0.002, 0.004, 0.0045,0.005]
          //     data:[0.01, 0.03, 0.02, 0.04, 0.045,0.08]
          // },
          // {
          //     name:'负债',
          //     data:[1411,3000,700,1565,352,450],
          //     yAxisIndex:1
          // },
          // {
          //     name:'杠杆',
          //     data:[0.34,1.34,2.77,3.9,4.8,4.9]
          // }

          // {
          //   data:[0.0,-0.0085592011412267688,-0.0059578753041872323,-0.0020139296802885731,0.0,-0.0084731543624161354,-0.021644295302013505,-0.03036912751677856,-0.028439597315436327,-0.023573825503355739,-0.023909395973154335,-0.0072147651006710944,-0.0020973154362415869,-0.0057885906040268109,0.0,-0.0054175695949324476,0.0,0.0,0.0,0.0,0.0],
          //   name:"达尔文CTA二号私募基金"
          // },
          // {
          //   data:[0.0,0.0,-0.001894800666969787,-0.0029558890404729476,-0.012429892375322105,-0.0056086099742306272,-0.003486433227224417,0.0,0.0,-0.00045160319132919735,0.0,0.0,-0.013210927004030482,-0.017689207344379843,-0.012837736975668035,-0.013434841021047972,-0.023063143752799053,-0.022466039707419005,-0.012837736975668035,-0.0098522167487685719,-0.011942080907598185],
          //   name:"达尔文CTA一号私募基金"
          // }

          {
            data: [
              0.0,
              0.0,
              -0.0032028662939037611,
              null,
              0.0,
              0.0,
              -0.0032372936225315563,
              -0.00048559404337966683,
              -0.0012949174490125559,
              0.0,
              -0.0046706393944273561,
              -0.0070864873570624098,
              -0.0087507381757663261,
              -0.00016105653084230731,
              0.0,
              0.0,
              0.0,
              0.0,
              -0.002180851063829814,
              -0.0096808510638297651,
              -0.0082978723404254495,
            ],
            name: '达尔文博学一号私募基金',
          },
          {
            data: [
              0.0,
              -0.0005630366443015733,
              0.0,
              undefined,
              0.0,
              0.0,
              -0.0036277382447328366,
              -0.0067903818427050844,
              -0.0021394353750987527,
              0.0,
              -0.0016686752572541153,
              -0.0012051543524613795,
              -0.0046352090479279129,
              0.0,
              0.0,
              -0.0041558204320226722,
              -0.0015983924738549593,
              0.0,
              -0.011221152098855214,
              -0.013810648737052622,
              -0.013401780846810873,
            ],
            name: '达尔文明德一号私募基金',
          },
          {
            data: [
              0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.0055803571428570953, -0.003292410714285765, -0.013727678571428537, -0.009151785714285654, -0.010379464285714235,
              -0.014676339285714324, -0.019866071428571441, -0.017243303571428559, -0.011774553571428648, -0.018415178571428603, -0.018694196428571508, -0.014955357142857117,
              -0.020089285714285698, -0.021930803571428625, -0.018750000000000044,
            ],
            name: '达尔文至诚一号私募基金',
          },
        ],
        xAxis2: [],
        series2: [],
        // xAxis3:['项1','项2','项3','项4'],
        // series3:[
        //   {
        //     data:[1,2,3,4],
        //     name:'手动阀手动阀地方'
        //   },
        //   {
        //     data:[1,2,3,4],
        //     name:'大大的风'
        //   },
        //   {
        //     data:[4,3,2,1],
        //     name:'阿道夫'
        //   },
        //   {
        //     data:[1,2,3,4],
        //     name:'阿斯顿发的发生'
        //   },
        //   {
        //     data:[4,3,2,1],
        //     name:'沃尔沃二无'
        //   },
        //   {
        //     data:[1,2,3,4],
        //     name:'佛燃股份的四个'
        //   },
        //   {
        //     data:[4,3,2,1],
        //     name:'阿斯顿发我'
        //   },
        //   {
        //     data:[1,2,3,4],
        //     name:'treat'
        //   },
        //   {
        //     data:[4,3,2,1],
        //     name:'阿萨德飞儿'
        //   },
        //   {
        //     data:[1,2,3,4],
        //     name:'人太多发的发'
        //   },
        //   {
        //     data:[4,3,2,1],
        //     name:'让他玩热帖外人田'
        //   },
        //   {
        //     data:[1,2,3,4],
        //     name:'人太多执行查询正常展示发的发'
        //   },
        //   {
        //     data:[4,3,2,1],
        //     name:'gsfdg'
        //   },
        //   {
        //     data:[1,2,3,4],
        //     name:'规范'
        //   },
        //   {
        //     data:[1,2,3,4],
        //     name:'tryrrtsgret'
        //   },
        //   {
        //     data:[4,3,2,1],
        //     name:'染色体施工方低功耗'
        //   },
        //   {
        //     data:[1,2,3,4],
        //     name:'泼尼'
        //   },
        //   {
        //     data:[1,2,3,4],
        //     name:'iuiyuiyr'
        //   },
        //   {
        //     data:[4,3,2,1],
        //     name:'考虑跟接口根据'
        //   },
        //   {
        //     data:[1,2,3,4],
        //     name:'同一套'
        //   }
        // ],
        // xAxis3:[],
        // series3:[],
        xAxis7: [
          '产品1',
          '产品2',
          '产品3',
          '产品4',
          '产品5',
          '产品6',
          '产品7',
          '产品8',
          '产品9',
          '产品10',
          '产品11',
          '产品12',
          '产品13',
          // '产品14','产品15','产品16','产品17','产品18','产品19','产品20',
          // '产品产品产品21'
        ],
        series7: [
          {
            name: '资产1',
            data: [
              {
                value: 0.34,
                itemStyle: {
                  opacity: 0.5,
                },
              },
              0.32,
              0.71,
              1.51,
              3.12,
              4.51,
              0.13,
              0.27,
              1.25,
              3.22,
              4.25,
              0.23,
              0.27,
              // 1.25,3.22,4.25,0.23,0.27,1.25,3.22,
              // 5.12
            ],
          },
        ],
        // xAxis7:[],
        // series7:[]
      });
    }, 2000);
  }

  render() {
    const xAxis0 = ['2020-01-01', '2020-01-02', '2020-01-03', '2020-01-04', '2020-01-05', '2020-01-06', '2020-01-07'];
    const series0 = [
      { name: '06:15:23', data: [4, , 4.3, , 4.8, 4] },
      { name: '08:13:23', data: [, , , 5, , , , ,] },
      { name: '10:45:56', data: [8] },
    ];

    const xAxis1 = ['红黄蓝', '我是五个字', 'csss红黄蓝d', '我比红黄蓝较长', '啦啦红黄蓝啦啦啦', '紫红黄蓝色', '呼啦啦红黄蓝家具'];
    const series1 = [
      // {
      //     name: '邮件营销',
      //     data: [-120, 0, -101, -134, -90, -230, -210]
      // },
      {
        name: '联盟广告',
        data: [100, 100, 191, 234, 290, 330, 310],
      },
      {
        name: '视频广告',
        data: [200, 200, 201, 154, 190, 330, 410],
      },
      // {
      //     name: '直接访问',
      //     data: [-320, -332, -301, -334, -390, -330, -320]
      // },
      // {
      //     name: '搜索引擎',
      //     data: [820, 932, 901, 934, 1290, 1330, 1320]
      // }
    ];

    const xAxis2 = [
      'abcdefghijk',
      '一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十',
      '一二三四五六七八九十一二三四五六',
      '一二三四五六七八九十',
      '一二三四五六七八九十',
      '一二三四五六七八九十一二三四五六七八九十',
    ];
    const series2 = [
      {
        name: '负债',
        data: [1411, 3000, 700, 1565, 352, 450],
        yAxisIndex: 1,
      },
      {
        name: '资产',
        data: [0.14, 0.3, 0.7, 0.5, 0.14, 0.25],
        type: 'point',
      },
    ];

    const xAxis3 = [
      '2020-01-01',
      '2020-01-02',
      '2020-01-03',
      '2020-01-04',
      '2020-01-05',
      '2020-01-06',
      '2020-01-01',
      '2020-01-02',
      '2020-01-03',
      '2020-01-04',
      '2020-01-05',
      '2020-01-06',
      '2020-01-01',
      '2020-01-02',
      '2020-01-03',
      '2020-01-04',
      '2020-01-05',
      '2020-01-06',
    ];
    const series3 = [
      {
        name: '资产',
        data: [-3, 0.3, 0.7, 1.5, 3.2, 4.5, 0.14, 0.3, 0.7, 1.5, 3.2, 4.5, 0.14, 0.3, 0.7, 1.5, 3.2, 4.5],
      },
      {
        name: '负债',
        data: [0.54, 0.34, 0.77, 0.9, 4.2, 5, 0.54, 0.34, 0.77, 0.9, 4.2, 5, 0.54, 0.34, 0.77, 0.9, 4.2, 5],
        yAxisIndex: 1,
      },
      {
        name: '杠杆',
        data: [0.34, 1.34, 2.77, 3.9, 4.8, 4.9, 0.34, 1.34, 2.77, 3.9, 4.8, 4.9, 0.34, 1.34, 2.77, 3.9, 4.8, 4.9],
      },
    ];

    const xAxis4 = ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06'];
    const series4 = [
      {
        name: '负债',
        data: [0.14, 0.3, 0.7, 1.5, 3.2, 4.5],
      },
      {
        name: '资产',
        data: [0.14, 0.3, 0.7, 1.5, 3.2, 4.5],
      },
    ];

    const xAxis5 = ['产品1', '产品2', '产品3', '产品4', '产品5', '产品6'];
    const series5 = [
      {
        name: '资产1',
        data: [0.14, 0.3, 0.7, 1.5, 3.2, 4.5],
      },
      {
        name: '资产2',
        data: [0.14, 0.3, 0.7, 1.5, 3.2, 4.5],
      },
      {
        name: '资产3',
        data: [0.14, 0.3, 0.7, 1.5, 3.2, 4.5],
      },
    ];

    const xAxis6 = [
      '2020-02-24',
      '2020-02-25',
      '2020-02-26',
      '2020-02-27',
      '2020-02-28',
      '2020-03-02',
      '2020-03-03',
      '2020-03-09',
      '2020-03-12',
      '2020-03-17',
      '2020-03-20',
      '2020-03-23',
      '2020-03-25',
      '2020-03-26',
      '2020-03-27',
      '2020-03-30',
      '2020-03-31',
      '2020-04-01',
      '2020-04-02',
      '2020-04-03',
      '2020-04-07',
      '2020-04-08',
      '2020-04-09',
      '2020-04-10',
      '2020-04-13',
      '2020-04-14',
      '2020-04-15',
      '2020-04-16',
      '2020-04-17',
      '2020-04-20',
      '2020-04-21',
      '2020-04-22',
      '2020-04-23',
      '2020-04-24',
      '2020-04-27',
      '2020-04-28',
      '2020-04-29',
      '2020-04-30',
      '2020-05-06',
      '2020-05-07',
      '2020-05-08',
      '2020-05-11',
      '2020-05-12',
      '2020-05-13',
      '2020-05-14',
      '2020-05-15',
      '2020-05-18',
      '2020-05-19',
      '2020-05-20',
      '2020-05-21',
      '2020-05-22',
    ];
    const series6 = [
      {
        data: [
          0.0494, 0.0495, 0.0495, 0.0494, 0.0497, 0.0497, 0.0499, 0.0499, 0.0495, 0.0487, 0.0481, 0.0484, 0.0483, 0.0484, 0.0483, 0.0484, 0.0486, 0.0485, 0.0484, 0.0485, 0.0484,
          0.0482, 0.0482, 0.0482, 0.0481, 0.0481, 0.0481, 0.0481, 0.0482, 0.0482, 0.0482, 0.0479, 0.0481, 0.0479, 0.0479, 0.0478, 0.0478, 0.0479, 0.0481, 0.0482, 0.048, 0.0535,
          0.0536, 0.0535, 0, 0, 0, 0, 0, 0, 0,
        ],
        name: '厚方对冲五号私募投资基金',
      },
      {
        data: [
          0.0451, 0.045, 0.0447, 0.0445, 0.0444, 0.0444, 0.0445, 0.0444, 0.0435, 0.0439, 0.0438, 0.0439, 0.0437, 0.0438, 0.0437, 0.0442, 0.0442, 0.0443, 0.0444, 0.0443, 0.0441,
          0.0439, 0.0439, 0.0439, 0.0438, 0.0436, 0.0438, 0.0438, 0.0438, 0.0438, 0.044, 0.0438, 0.0439, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        ],
        name: '润洲正行四号私募证券投资基金',
      },
      {
        data: [
          0.1006, 0.1026, 0.1054, 0.1052, 0.1048, 0.1038, 0.1039, 0.1071, 0.1107, 0.1102, 0.1097, 0.1098, 0.1093, 0.1092, 0.1092, 0.1065, 0.1055, 0.1056, 0.1054, 0.1056, 0.1056,
          0.1057, 0.1055, 0.105, 0.1049, 0.1048, 0.1048, 0.1047, 0.1046, 0.1046, 0.1045, 0.1044, 0.1043, 0.1044, 0.1045, 0.1044, 0.1043, 0.1044, 0.1044, 0.1046, 0.1044, 0.1158,
          0.1156, 0.1157, 0.1156, 0.1157, 0.1156, 0.1297, 0.1295, 0.1297, 0,
        ],
        name: '量宇冠一六号私募证券基金',
      },
      {
        data: [
          0.0903, 0.0903, 0.0899, 0.09, 0.0899, 0.0899, 0.0898, 0.0895, 0.0891, 0.089, 0.0888, 0.089, 0.0886, 0.0887, 0.0886, 0.0889, 0.089, 0.0891, 0.089, 0.0894, 0.0894, 0.0897,
          0.0898, 0.0898, 0.0899, 0.0898, 0.09, 0.09, 0.0899, 0.09, 0.09, 0.09, 0.0898, 0.0902, 0.0903, 0.0902, 0.0902, 0.0903, 0.0903, 0.0904, 0.0904, 0.1002, 0.1001, 0.1001,
          0.1002, 0.1002, 0.1, 0.1124, 0.1126, 0.1128, 0,
        ],
        name: '爱凡哲五号私募证券投资基金',
      },
      {
        data: [
          0.1875, 0.189, 0.1899, 0.1888, 0.1891, 0.187, 0.1879, 0.1865, 0.1845, 0.182, 0.1815, 0.182, 0.1806, 0.1809, 0.1808, 0.1813, 0.1804, 0.1813, 0.1807, 0.1815, 0.1811,
          0.1814, 0.1817, 0.182, 0.1819, 0.1818, 0.1818, 0.1817, 0.1815, 0.1816, 0.1818, 0.182, 0.1821, 0.182, 0.1819, 0.1822, 0.1821, 0.1816, 0.1821, 0.1833, 0.183, 0.2027,
          0.2027, 0.2029, 0.2028, 0.2027, 0.2026, 0.2274, 0.2273, 0.2274, 0,
        ],
        name: '佳期星际私募证券投资基金二期',
      },
      {
        data: [
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.042, 0.0422, 0.0422, 0.0409, 0.0407, 0.0456, 0.0452, 0.0451,
          0.0451, 0.0451, 0.0464, 0.0204, 0.0207, 0.0206, 0,
        ],
        name: '汇富联合通赢1号私募证券投资基金',
      },
      {
        data: [
          0.0288, 0.0288, 0.0288, 0.0288, 0.0288, 0.0288, 0.0289, 0.0288, 0.0287, 0.0287, 0.0286, 0.0286, 0.0285, 0.0285, 0.0285, 0.0286, 0.0286, 0.0286, 0.0286, 0.0286, 0.0286,
          0.0287, 0.0287, 0.0287, 0.0287, 0.0287, 0.0287, 0.0287, 0.0286, 0.0286, 0.0286, 0.0286, 0.0286, 0.0286, 0.0286, 0.0286, 0.0286, 0.0286, 0.0286, 0.0287, 0.0287, 0.0318,
          0.0318, 0.0318, 0.0318, 0.0318, 0.0318, 0.0357, 0.0357, 0.0358, 0,
        ],
        name: '浮石信安2号私募投资基金',
      },
      {
        data: [
          0.1981, 0.1986, 0.1983, 0.198, 0.1983, 0.1974, 0.198, 0.1971, 0.1953, 0.1949, 0.1942, 0.1943, 0.1934, 0.1935, 0.1933, 0.1939, 0.1937, 0.1942, 0.1938, 0.1943, 0.1944,
          0.1949, 0.1949, 0.195, 0.1952, 0.195, 0.1951, 0.195, 0.1951, 0.1952, 0.1953, 0.1953, 0.1952, 0.1954, 0.1952, 0.1954, 0.195, 0.1953, 0.1954, 0.1963, 0.1959, 0.2173,
          0.2174, 0.2175, 0.2174, 0.2175, 0.2173, 0.2442, 0.2438, 0.2441, 0,
        ],
        name: '佳期星际私募证券投资基金一期',
      },
      {
        data: [
          0.01, 0.01, 0.0099, 0.0099, 0.0096, 0.0099, 0.0099, 0.0096, 0.0095, 0.0088, 0.0087, 0.0084, 0.0088, 0.0087, 0.0088, 0.0087, 0.0087, 0.0087, 0.0088, 0.0088, 0.009, 0.009,
          0.009, 0.009, 0.0089, 0.009, 0.009, 0.009, 0.0091, 0.0091, 0.009, 0.0091, 0.009, 0.009, 0.009, 0.0091, 0.0091, 0.0093, 0.0093, 0.0093, 0.0094, 0.0104, 0.0104, 0.0104,
          0.0103, 0.0102, 0.0103, 0.0116, 0.0115, 0.0115, 0,
        ],
        name: '华泰柏瑞沪深300ETF',
      },
      {
        data: [
          0.0069, 0.0069, 0.0067, 0.0067, 0.0064, 0.0066, 0.0067, 0.0064, 0.0064, 0.006, 0.006, 0.0057, 0.0059, 0.0059, 0.0058, 0.0058, 0.0057, 0.0057, 0.0059, 0.0058, 0.006,
          0.006, 0.0061, 0.006, 0.0059, 0.006, 0.006, 0.0061, 0.0061, 0.0061, 0.0061, 0.0061, 0.0061, 0.006, 0.006, 0.006, 0.006, 0.0061, 0.0062, 0.0062, 0.0063, 0.0069, 0.0069,
          0.007, 0.0069, 0.007, 0.0069, 0.0078, 0.0078, 0.0077, 0,
        ],
        name: '南方中证500ETF',
      },
      {
        data: [
          0.0066, 0.0067, 0.0064, 0.0064, 0.006, 0.0062, 0.0063, 0.006, 0.0059, 0.0055, 0.0054, 0.0052, 0.0055, 0.0055, 0.0054, 0.0053, 0.0053, 0.0053, 0.0054, 0.0054, 0.0056,
          0.0056, 0.0056, 0.0055, 0.0055, 0.0057, 0.0057, 0.0057, 0.0058, 0.0058, 0.0058, 0.0058, 0.0058, 0.0057, 0.0058, 0.0058, 0.0058, 0.006, 0.0061, 0.0061, 0.0061, 0.0067,
          0.0067, 0.0068, 0.0067, 0.0068, 0.0067, 0.0076, 0.0075, 0.0075, 0,
        ],
        name: '华安创业板50ETF',
      },
      {
        data: [
          0.0097, 0.0096, 0.0096, 0.0097, 0.0095, 0.0098, 0.0098, 0.0096, 0.0094, 0.009, 0.0088, 0.0085, 0.0089, 0.0088, 0.0089, 0.0089, 0.0088, 0.0088, 0.0089, 0.0089, 0.009,
          0.009, 0.009, 0.009, 0.009, 0.009, 0.009, 0.009, 0.009, 0.009, 0.0089, 0.0089, 0.0089, 0.0089, 0.009, 0.009, 0.0091, 0.0092, 0.0092, 0.0092, 0.0092, 0.0103, 0.0102,
          0.0102, 0.0101, 0.0101, 0.0101, 0.0114, 0.0113, 0.0113, 0,
        ],
        name: '华泰柏瑞中证红利低波动ETF',
      },
      {
        data: [
          0.086, 0.0863, 0.0862, 0.0865, 0.087, 0.0875, 0.0879, 0.0881, 0.089, 0.0896, 0.0902, 0.0905, 0.0906, 0.0906, 0.0905, 0.0909, 0.0912, 0.0911, 0.0911, 0.0911, 0.0911,
          0.091, 0.091, 0.091, 0.0911, 0.0908, 0.0908, 0.0909, 0.0906, 0.0907, 0.0906, 0.0904, 0.0905, 0.0907, 0.0904, 0.0902, 0.0895, 0.0893, 0.0891, 0.089, 0.089, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0,
        ],
        name: '混沌天成-中量投量化CTA一号私募投资基金',
      },
      {
        data: [
          0.0499, 0.0503, 0.0504, 0.0503, 0.0505, 0.051, 0.0507, 0.0505, 0.0511, 0.0535, 0.0559, 0.055, 0.0561, 0.0557, 0.0559, 0.0564, 0.0575, 0.0565, 0.0567, 0.0563, 0.0555,
          0.0551, 0.055, 0.0547, 0.0545, 0.0546, 0.0552, 0.0551, 0.0551, 0.0551, 0.0551, 0.0558, 0.0563, 0.0558, 0.0557, 0.0564, 0.0565, 0.0564, 0.0558, 0.0557, 0.0553, 0.0614,
          0.0614, 0.0617, 0.0618, 0.062, 0.0615, 0.0702, 0.07, 0.0701, 0,
        ],
        name: '象限1号私募投资基金',
      },
      {
        data: [
          0.1008, 0.0962, 0.0945, 0.0962, 0.0964, 0.0985, 0.0965, 0.0973, 0.099, 0.1018, 0.1026, 0.1029, 0.1045, 0.1045, 0.105, 0.105, 0.1054, 0.1049, 0.1056, 0.1043, 0.105,
          0.1048, 0.1045, 0.1053, 0.1054, 0.1061, 0.1051, 0.1054, 0.106, 0.1054, 0.1053, 0.1053, 0.1048, 0.105, 0.1053, 0.1045, 0.1062, 0.1055, 0.1055, 0.1043, 0.106, 0.1178,
          0.1184, 0.1176, 0.1182, 0.1179, 0.1178, 0.131, 0.1319, 0.1312, 0,
        ],
        name: '柏泰华盈常青藤套利1号基金',
      },
      {
        data: [
          0.0302, 0.03, 0.0298, 0.0297, 0.0297, 0.0296, 0.0295, 0.029, 0.0285, 0.0282, 0.0278, 0.0277, 0.0274, 0.0273, 0.0272, 0.0274, 0.0273, 0.0273, 0.0272, 0.0273, 0.0272,
          0.0272, 0.0272, 0.0271, 0.0271, 0.027, 0.0269, 0.0269, 0.0268, 0.0267, 0.0266, 0.0266, 0.0265, 0.0705, 0.0705, 0.0705, 0.0279, 0.0279, 0.0277, 0.0278, 0.0277, 0.0197,
          0.0196, 0.0196, 0.073, 0.073, 0.0728, -0.0096, -0.0097, -0.0097, 1.0,
        ],
        name: '其他资产',
      },
      // {
      //   data:[0.0302,0.0300,0.0298,0.0297,0.0297,0.0296,0.0295,0.0290,0.0285,0.0282,0.0278,0.0277,0.0274,0.0273,0.0272,0.0274,0.0273,0.0273,0.0272,0.0273,0.0272,0.0272,0.0272,0.0271,0.0271,0.0270,0.0269,0.0269,0.0268,0.0267,0.0266,0.0266,0.0265,0.0705,0.0705,0.0705,0.0279,0.0279,0.0277,0.0278,0.0277,0.0197,0.0196,0.0196,0.0730,0.0730,0.0728,-0.0096,-0.0097,-0.0097,1.0000],
      //   name:"其他资产1"
      // }
    ];
    function transChartsData(arr, keys) {
      return arr.map((v) => v[keys]);
    }
    const arr = [
      {
        province: '安徽省',
        creditSpreads: 62.4,
        creditInterestDiff: 21750,
      },
      {
        province: '江苏省',
        creditSpreads: 56.9,
        creditInterestDiff: 34120,
      },
      {
        province: '浙江省',
        creditSpreads: 41.8,
        creditInterestDiff: 48370,
      },
      {
        province: '青海省',
        creditSpreads: 18.6,
        creditInterestDiff: 57370,
      },
      {
        province: '云南省',
        creditSpreads: 17.8,
        creditInterestDiff: 67582,
      },
      {
        province: '贵州省',
        creditSpreads: 19.8,
        creditInterestDiff: 80892,
      },
    ];
    return (
      <div>
        <FirstHeaderC title='echarts图' />
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='警戒线' />
            <XYAxisChartsC
              cordonConfig={{
                cordonValue: 270,
              }}
              series={[
                {
                  data: [150, 230, 224, 218, 135, 147, 260],
                  type: 'bar',
                },
                {
                  data: [],
                },
              ]}
              xAxis={[
                ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21'],
              ]}
              height={400}
              type='line'
              click={(e) => console.log(e)}
              legendSelect={{ 组合: false }}
            />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='双y轴' />
            <XYAxisChartsC
              isAbbreviate={true}
              isResponsiveHeight={true}
              dataZoom={true}
              yAxisUnit={['信用利差(bp)', '信用利差分位数(%)']}
              series={[
                {
                  name: '信用利差（bp）',
                  type: 'bar',
                  data: transChartsData(arr, 'creditSpreads'),
                },
                {
                  name: '信用利差分位数（%）',
                  type: 'line',
                  data: transChartsData(arr, 'creditInterestDiff'),
                  yAxisIndex: 1,
                },
              ]}
              xAxis={transChartsData(arr, 'province')}
              height={400}
              type='bar'
            />
          </Col>
        </Row>
        ---
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title="异步加载有数据，折线图（type='line'）" />
            <XYAxisChartsC
              series={this.state.series1}
              xAxis={this.state.xAxis1}
              height={400}
              // yAxisUnit={['测试(万元)','测试']}
              // yAxisFormat={[, value=>value+'%']}
              // yAxisRange={[[-1,5]]}
              toolTipDataFormat={[(value) => `${value}万元`, (value) => `${value}%`]}
              hasYAxisPosi={true}
              title={'123'}
              percentStyle={[true]}
            />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='异步加载无数据' />
            <XYAxisChartsC
              series={this.state.series2}
              xAxis={this.state.xAxis2}
              height={400}
              yAxisUnit={[, '测试']}
              yAxisFormat={[, (value) => `${value}%`]}
              yAxisRange={[[-1, 5]]}
            />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title="点状图（type='point'）" />
            <XYAxisChartsC
              title='折线图表'
              series={series0}
              xAxis={xAxis0}
              height={400}
              boundaryGap={false}
              type='point'
              // lableRotate={90}
              isShowLegent={false}
              isShowTooltip={false}
              colors={[Color.echart[0]]}
            />
          </Col>
          <Col span={12}>
            <SecondHeaderC title="面积图（type='area'）" />
            <XYAxisChartsC series={series1} xAxis={xAxis1} yAxisUnit={['万元']} height={400} type='area' isAbbreviate={true} />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title="柱状图（type='bar'，局部数据点状图）" />
            <XYAxisChartsC
              series={series2}
              xAxis={xAxis2}
              height={400}
              dataZoom={true}
              yAxisUnit={['测试(万元)']}
              // yAxisRange={[,[100,3000]]}
              type='bar'
              toolTipDataFormat={[(value) => `${value}万元`, (value) => `${value}%`]}
              // showSeriesLabel={true}
              seriesLabelDataFormat={[(params) => `${params.data}%`]}
            />
          </Col>
          <Col span={12}>
            <SecondHeaderC title="柱状图（type='bar'）" />
            <XYAxisChartsC
              series={series3}
              xAxis={xAxis3}
              height={400}
              dataZoom={true}
              type='bar'
              showBorder={false}
              // showSeriesLabel={true}
              seriesLabelDataFormat={[(params) => `${params.data}%`, , (params) => `${params.data}~`]}
              // title={'123'}
              // yAxisUnit={['测试(万元)']}
            />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title="线性堆叠图（type='lineStack'）" />
            <XYAxisChartsC
              series={series4}
              xAxis={xAxis4}
              height={400}
              type='lineStack'
              markArea={[
                { range: ['01-01', '01-03'], color: '#EAF4D7' },
                { range: ['01-03', '01-04'], color: '#FBDEE1' },
                { range: ['01-04', '01-06'], color: '#FEF5D0' },
              ]}
            />
          </Col>
          <Col span={12}>
            <SecondHeaderC title="面积堆叠图（type='areaStack'）" />
            <XYAxisChartsC series={series4} xAxis={xAxis4} height={400} dataZoom={true} type='areaStack' yAxisFormat={[(value) => `${value}%`]} gridLeft={120} gridRight={120} />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title="柱状堆叠图（type='barStack'）" />
            <XYAxisChartsC
              series={series5}
              xAxis={xAxis5}
              height={400}
              type='barStack'
              // markArea={[{range:['产品1','产品3'],color:'#EAF4D7'},{range:['产品3','产品4'],color:'#FBDEE1'},{range:['产品4','产品6'],color:'#FEF5D0'}]}
              barMaxWidth={50}
              seriesLabelDataFormat={[(params) => params.data, (params) => params.data, (params) => params.data]}
            />
          </Col>
          <Col span={12}>
            <SecondHeaderC title="面积堆叠图（type='areaStack'）" />
            <XYAxisChartsC series={series6} xAxis={xAxis6} height={464} type='areaStack' legentAbbreviate={true} />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='柱状图,自动判断是否添加文本标签' />
            <XYAxisChartsC
              series={this.state.series7}
              xAxis={this.state.xAxis7}
              height={280}
              width={920}
              type='bar'
              isAbbreviate={true}
              seriesLabelDataFormat={[(params) => (params.data.value ? `${params.data.value}%` : `${params.data}%`)]}
            />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='柱状图,自动判断是否添加文本标签' />
            <XYAxisChartsC
              series={this.state.series7}
              xAxis={this.state.xAxis7}
              height={280}
              width={620}
              type='bar'
              isAbbreviate={true}
              seriesLabelDataFormat={[(params) => (params.data.value ? `${params.data.value}%` : `${params.data}%`)]}
            />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='根据图例自动调整高度' />
            <XYAxisChartsC series={this.state.series3} xAxis={this.state.xAxis3} height='auto' type='areaStack' legentAbbreviate={true} />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='根据图例自动调整高度' />
            <XYAxisChartsC series={this.state.series3} xAxis={this.state.xAxis3} height='auto' type='areaStack' width={620} legentAbbreviate={true} />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='初始禁用某些图例' />
            <XYAxisChartsC
              series={[
                {
                  data: [0.239968306073, 0.463919859641, 0.296111834286],
                  name: '组合',
                },
                {
                  data: [0.0166, 0.0233, 0.0537],
                  name: '基准',
                },
              ]}
              xAxis={['计算机', '化工', '电子']}
              height={278}
              type='bar'
              seriesLabelDataFormat={[, (params) => `${(params.data * 100).toFixed(2)}%`]}
              lableRotate={45}
              click={(e) => console.log(e)}
              legendSelect={{ 组合: false }}
            />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='xAxis传两个数组，仅适用于将第二个横轴隐藏，并且series[0]对应第一个横轴，series[1]对应第二个横轴' />
            <XYAxisChartsC
              series={[
                {
                  data: [150, 230, 224, 218, 135, 147, 260],
                  type: 'bar',
                },
                {
                  data: [200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200],
                },
              ]}
              xAxis={[
                ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21'],
              ]}
              height={278}
              type='line'
              click={(e) => console.log(e)}
              legendSelect={{ 组合: false }}
            />
          </Col>
        </Row>
      </div>
    );
  }
}

export default XYAxisChartsCDemo;
